import React, { useState } from 'react';
import './Saishi_Card.css'; 
import { EyeOutlined, StarOutlined, StarFilled, ExportOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

interface Saishi_CardProps {
    app: {
      title: string;
      description: string;
      date: string;
      collections: number;
      views: string;
      zhuanfa: number
    };
  }

const RaceCard: React.FC <Saishi_CardProps> = ({app}) => {
  const[liked, setLiked] = useState(false);
  const[collected, setCollected] = useState(false);
  const navigate = useNavigate();
  const handleInfo = () => {
    navigate('/dachuang/saishi/xiangqing');
  }
  
  return (
    <div className="saicard">
      <div className="saicard-header">
        <span className="saitag">置顶</span>
        <span className="saititle">{app.title}</span>
        <span className="saidate">{app.date}</span>
      </div>
      <div className="saicard-content">
        <p>
          {app.description}
        </p>
      </div>
      <div className="saicard-footer">
        <span onClick={() => setCollected(!collected)} style={{ display: 'inline-flex', alignItems: 'center', marginRight: '0rem', color: '#81838f', fontSize: '1.125rem'}}>
          {collected ? <StarFilled style={{ color: 'gold', fontSize: '1.125rem', marginRight: '0.375rem' }} /> : <StarOutlined style={{ fontSize: '1.125rem', marginRight: '0.375rem' }} />} {app.collections}
        </span>
        <span onClick={() => setLiked(!liked)} style={{ display: 'inline-flex', alignItems: 'center', marginRight: '0rem', color: '#81838f',fontSize: '1.125rem'}}>
          {liked ? <ExportOutlined style={{ color: 'blue', fontSize: '1.125rem', marginRight: '0.375rem' }} /> : <ExportOutlined style={{ fontSize: '1.125rem', marginRight: '0.375rem' }} />} {app.zhuanfa}
        </span>
        <span style={{ display: 'inline-flex', alignItems: 'center', color: '#81838f', fontSize: '1.125rem'}}>
          <EyeOutlined style={{ fontSize: '1.125rem', marginRight: '0.375rem' }} /> {app.views}
        </span>
        <a className="saishibutton" onClick={handleInfo}>查看详情</a>
      </div>
    </div>
  )
}

export default RaceCard;
